<template>
  	<!-- 修改密码 -->
	<el-dialog v-model="changePasswordDialog" title="修改密码" width="400px">
		<el-form class="login-form" :label-position="labelPosition" :rules="rules">
			<el-form-item label="请输入您的旧密码" prop="oldPassword">
				<el-input v-model="passwordData.oldPassword" placeholder="请输入您的旧密码" show-password />
			</el-form-item>
			<el-form-item label="请输入您的新密码" prop="newPassword">
				<el-input v-model="passwordData.newPassword" placeholder="请输入您的新密码" show-password />
			</el-form-item>
		</el-form>
		<!-- 底部内容 -->
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="changePasswordDialog = false">取消</el-button>
				<el-button type="primary" @click="changeUserPassword">
					确定
				</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import {ref,reactive} from 'vue'
import {useRouter} from 'vue-router'
import {changePassword } from '@/api/userinfo/index'
import type {passwordFormData} from '@/api/userinfo/type'
import { ElMessage } from 'element-plus'
const router = useRouter()
//控制弹框开启关闭的变量
const changePasswordDialog = ref(false)
// 表单对齐方式
const labelPosition = ref('top')
//表单对象
const passwordData = reactive({
    oldPassword:'',
    newPassword:'',
})
	// 表单规则
const rules = reactive({
	oldPassword: [
		{ required: true, message: '请输入您的旧密码', trigger: 'blur' },
	],
	newPassword: [
		{ required: true, message: '请输入您的新密码', trigger: 'blur' },
	],
})
//点击确定事件
const changeUserPassword = async ()=>{
    let data:passwordFormData = {id:localStorage.getItem('id'),oldPassword:passwordData.oldPassword,newPassword:passwordData.newPassword}
    const res = await changePassword(data)
    if(res.status == 0){
        ElMessage({
            type:'success',
            message:'修改成功'
        })
        router.push('/login')
        changePasswordDialog.value = false
    }else{
        ElMessage({
            type:'error',
            message:'修改失败'
        })
    }
    
}
//打开弹框的事件
const open = ()=>{
    changePasswordDialog.value = true
}
//对外暴露
defineExpose({
		open
})
</script>

<style scoped>
</style>
